<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>学生</title>
  <script>
    // 判断token是否存在
    // 1. 如果token没有存在, 跳转到登录页
    if (localStorage.getItem('token-104') === null) location.href = './login.html' 
  </script>
  <link rel="stylesheet" href="./bootstrap/bootstrap.min.css" />
  <link rel="stylesheet" href="./bootstrap/bootstrap-icons.css" />
  <link rel="stylesheet" href="./css/common.css" />
  <link rel="stylesheet" href="./css/student.css" />
</head>

<body class="application application-offset">
  <div class="container-fluid container-application">
    <div class="sidenav show" id="sidenav-main">
      <!-- Sidenav header -->
      <div class="sidenav-header d-flex align-items-center">
        <a class="navbar-brand" href="./index.html">
          <span class="logo">·ITCAST·</span>
        </a>
      </div>
      <!-- User mini profile -->
      <div class="sidenav-user d-flex flex-column align-items-center justify-content-between text-center">
        <!-- Avatar -->
        <div>
          <a href="#" class="avatar rounded-circle avatar-xl">
            <img alt="Image placeholder" src="https://yanxuan-item.nosdn.127.net/8b27deb1670c53e67c42ca3e1ed6fd12.jpg"
              class="" />
          </a>
          <div class="mt-5">
            <h5 class="mb-0 text-white">黑马前端</h5>
            <span class="d-block text-sm text-white opacity-8 mb-3">数据可视化</span>
            <a href="javascript:;" class="btn btn-sm btn-white btn-icon rounded-pill shadow hover-translate-y-n3">
              <span class="btn-inner--text">学前端来黑马</span>
            </a>
          </div>
        </div>
      </div>
      <!-- Application nav -->
      <div class="nav-application clearfix">
        <a href="./index.html" class="btn btn-square text-sm">
          <span class="btn-inner--icon d-block"><i class="bi bi-house bi-2x"></i></span>
          <span class="btn-inner--icon d-block pt-2">首页</span>
        </a>
        <a href="./student.html" class="btn btn-square text-sm active">
          <span class="btn-inner--icon d-block"><i class="bi bi-people bi-2x"></i></span>
          <span class="btn-inner--icon d-block pt-2">学生</span>
        </a>
        <a href="javascript:;" class="btn btn-square text-sm">
          <span class="btn-inner--icon d-block"><i class="bi bi-columns bi-2x"></i></span>
          <span class="btn-inner--icon d-block pt-2">排版</span>
        </a>
        <a href="javascript:;" class="btn btn-square text-sm">
          <span class="btn-inner--icon d-block"><i class="bi bi-files bi-2x"></i></span>
          <span class="btn-inner--icon d-block pt-2">资料</span>
        </a>
        <a href="javascript:;" class="btn btn-square text-sm">
          <span class="btn-inner--icon d-block"><i class="bi bi-receipt bi-2x"></i></span>
          <span class="btn-inner--icon d-block pt-2">就业</span>
        </a>
        <a href="javascript:;" class="btn btn-square text-sm">
          <span class="btn-inner--icon d-block"><i class="bi bi-gear bi-2x"></i></span>
          <span class="btn-inner--icon d-block pt-2">设置</span>
        </a>
      </div>
      <!-- Misc area -->
      <div class="card bg-gradient-warning">
        <div class="card-body">
          <h5 class="text-white">哈喽, 朋友!</h5>
          <p class="text-white mb-4">为什么不现在开始学习前端，创造一些令人惊叹的东西呢？</p>
          <a href="http://itcast.cn" class="btn btn-sm btn-block btn-white rounded-pill" target="_blank">Get started</a>
        </div>
      </div>
    </div>
    <div class="main-content position-relative">
      <nav class="navbar navbar-main navbar-expand-lg navbar-dark navbar-border" id="navbar-main">
        <div class="container-fluid">
          <!-- Navbar nav -->
          <div class="collapse navbar-collapse navbar-collapse-fade" id="navbar-main-collapse">
            <ul class="navbar-nav align-items-lg-center">
              <!-- Home  -->
              <li class="nav-item">
                <a class="nav-link pl-lg-0" href="./index.html"> 首页 </a>
              </li>
              <li class="nav-item">
                <a class="nav-link pl-lg-0" href="./index.html"> 传智教育 </a>
              </li>
              <li class="nav-item">
                <a class="nav-link pl-lg-0" href="./index.html"> 黑马程序员 </a>
              </li>
              <li class="nav-item">
                <a class="nav-link pl-lg-0" href="./index.html"> 文档 </a>
              </li>
            </ul>
            <!-- Right menu -->
            <ul class="navbar-nav ml-lg-auto align-items-center d-none d-lg-flex">
              <li class="nav-item dropdown dropdown-animate">
                <a class="nav-link pr-lg-0" href=".dropdown-menu" role="button" data-toggle="dropdown"
                  aria-haspopup="true" aria-expanded="false">
                  <div class="media media-pill align-items-center">
                    <span class="avatar rounded-circle">
                      <img alt="Image placeholder"
                        src="https://yanxuan-item.nosdn.127.net/8b27deb1670c53e67c42ca3e1ed6fd12.jpg" />
                    </span>
                    <div class="ml-2 d-none d-lg-block">
                      <span id="username" class="mb-0 text-sm font-weight-bold">Admin</span>
                    </div>
                  </div>
                </a>
              </li>
              <li class="nav-item">
                <a class="nav-link pl-lg-0" id="logout" href="javascript:;"> 退出 </a>
              </li>
            </ul>
          </div>
        </div>
      </nav>
      <div class="page-content">
        <div class="page-title mb-3">
          <div class="row justify-content-between align-items-center">
            <div class="col-md-6 mb-3 mb-md-0">
              <h5 class="h3 font-weight-400 mb-0 text-white">Students</h5>
              <span class="text-sm text-white opacity-8">一共有 <b class="total">0</b> 位学员</span>
            </div>
            <div class="col-md-6 d-flex align-items-center justify-content-between justify-content-md-end">
              <a id="openModal" href="javascript:;" class="btn btn-sm btn-white btn-icon-only rounded-circle ml-4">
                <span class="btn-inner--icon"><i class="bi bi-plus bi-2x"></i></span>
              </a>
            </div>
          </div>
        </div>
        <div class="row">
          <div class="col">
            <div class="card card-fluid">
              <div class="table-responsive" style="min-height: 1000px">
                <table class="table align-items-center">
                  <thead>
                    <tr>
                      <th>姓名</th>
                      <th>年龄</th>
                      <th>性别</th>
                      <th>组号</th>
                      <th>期望薪资</th>
                      <th>就业薪资</th>
                      <th>籍贯</th>
                      <th>操作</th>
                    </tr>
                  </thead>
                  <tbody class="list">
                    <!-- <tr>
                      <td>张杰</td>
                      <td>20</td>
                      <td>男</td>
                      <td>第2组</td>
                      <td>10000</td>
                      <td>13000</td>
                      <td>北京北京市东城区</td>
                      <td>
                        <a href="javascript:;" class="text-success mr-3"><i class="bi bi-pen"></i></a>
                        <a href="javascript:;" class="text-danger"><i class="bi bi-trash"></i></a>
                      </td>
                    </tr> -->
                  </tbody>
                </table>
              </div>
            </div>
          </div>
        </div>
        <!-- footer -->
        <div class="footer pt-5 pb-4 footer-light" id="footer-main">
          <div class="row text-center text-sm-left align-items-sm-center">
            <div class="col-sm-6">
              <p class="text-sm mb-0">© 2022 <a href="https://itcast.cn" class="h6 text-sm" target="_blank">前端学科</a>.
                All rights reserved.</p>
            </div>
            <div class="col-sm-6 mb-md-0">
              <ul class="nav justify-content-center justify-content-md-end">
                <li class="nav-item">
                  <a class="nav-link" href="#">Support</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="#">Terms</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link pr-0" href="#">Privacy</a>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!-- add Modal -->
  <div class="modal fade" id="modal">
    <div class="modal-dialog modal-lg">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title">添加学员</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
          <form id="form" class="g-3 row" autocomplete="off" novalidate>
            <div class="col-sm-6">
              <div class="form-group">
                <label class="input-group-label">姓名：</label>
                <input type="text" name="name" class="form-control" placeholder="请输入姓名" />
              </div>
            </div>
            <div class="col-sm-6">
              <div class="form-group">
                <label class="input-group-label">性别：</label>
                <div class="input">
                  <div class="form-check d-inline-block">
                    <input value="0" checked id="cb01" class="form-check-input" type="radio" name="gender" />
                    <label for="cb01" class="form-check-label">男</label>
                  </div>
                  <div class="form-check d-inline-block">
                    <input value="1" id="cb02" class="form-check-input" type="radio" name="gender" />
                    <label for="cb02" class="form-check-label">女</label>
                  </div>
                </div>
              </div>
            </div>
            <div class="col-sm-6">
              <div class="form-group">
                <label class="input-group-label">年龄：</label>
                <input type="text" name="age" class="form-control" placeholder="请输入年龄" />
              </div>
            </div>
            <div class="col-sm-6">
              <div class="form-group">
                <label class="input-group-label">组号：</label>
                <input type="text" name="group" class="form-control" placeholder="请输入1-8组号" />
              </div>
            </div>
            <div class="col-sm-6">
              <div class="form-group">
                <label class="input-group-label">期望薪资：</label>
                <input type="text" name="hope_salary" class="form-control" placeholder="请输入期望薪资" />
              </div>
            </div>
            <div class="col-sm-6">
              <div class="form-group">
                <label class="input-group-label">就业薪资：</label>
                <input type="text" name="salary" class="form-control" placeholder="请输入就业薪资" />
              </div>
            </div>
            <div class="col-sm-12">
              <div class="form-group">
                <label class="input-group-label">籍贯：</label>
                <div class="input pl-0">
                  <select class="form-select custom-select" name="province">
                    <option value="">--省份--</option>
                  </select>
                  <select class="form-select custom-select" name="city">
                    <option value="">--城市--</option>
                  </select>
                  <select class="form-select custom-select" name="area">
                    <option value="">--地区--</option>
                  </select>
                </div>
              </div>
            </div>
          </form>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
          <button type="button" class="btn btn-blue" id="submit">确认</button>
        </div>
      </div>
    </div>
  </div>
  <script src="./bootstrap/bootstrap.min.js"></script>
  <script src="./lib/axios.js"></script>
  <script src="./lib/form-serialize.js"></script>
  <script src="./js/common.js"></script>
  <script>
    // 1. 学生列表渲染
    // 1.1 定义一个函数 - 目的为了复用
    // 1.2 函数内发送请求 - 通过接口文档
    // 1.3 获取数据 - 生成对应的结构
    // 1.4 map() 结构的返回 -  找到大的容器进行渲染

    // 找对象
    // tbody容器
    const list = document.querySelector('.list')
    // 学生数量的统计
    const total = document.querySelector('.total')
    // 添加按钮
    const openModal = document.querySelector('#openModal')
    // 表单
    const form = document.querySelector('form')
    // 标题
    const modalTitle = document.querySelector('.modal-title')
    // 省市区
    const pselect = document.querySelector('[name="province"]')
    const cselect = document.querySelector('[name="city"]')
    const aselect = document.querySelector('[name="area"]')
    // 确认按钮
    const submitBtn = document.querySelector('#submit')

    async function initStudentList() {
      const { data } = await axios.get('/students')
      console.log(data);
      const html = data.map(item => {
        return `<tr>
                      <td>${item.name}</td>
                      <td>${item.age}</td>
                      <td>${item.gender === 0 ? '男' : '女'}</td>
                      <td>第${item.group}组</td>
                      <td>${item.hope_salary}</td>
                      <td>${item.salary}</td>
                      <td>${item.province}${item.city}${item.area}</td>
                      <td>
                        <a href="javascript:;" class="text-success mr-3">
                          <i class="bi bi-pen" data-id=${item.id}></i>
                        </a>
                        <a href="javascript:;" class="text-danger">
                          <i class="bi bi-trash" data-id=${item.id}></i>
                        </a>
                      </td>
                    </tr>`
      }).join('')
      list.innerHTML = html
      total.innerHTML = data.length
    }
    initStudentList()

    // 2. 删除功能
    // 2.1 通过事件委托 - 注册事件 - 事件冒泡的机制
    // 2.2 类名判断查找 contains()  / 布尔值 
    // 2.3 查找接口文档 - 需要的是什么参数 - id
    // 2.3.1 通过自定义属性 data-id=xxx
    // 2.4 删除 - 结果处理 
    // 2.4.1 成功 - 提示用户 + 重新渲染
    // 2.4.2 失败 - 提示用户 
    list.addEventListener('click', async function (e) {
      // 删除按钮
      if (e.target.classList.contains('bi-trash')) {
        // 发送请求之前 - 一定要先打印id 确保id获取的没问题, 在进行接口的请求
        const id = e.target.dataset.id
        try {
          await axios.delete(`/students/${id}`)
          alert('删除成功')
          initStudentList()
        } catch (error) {
          alert('删除失败')
        }
      }
      // 编辑按钮
      if (e.target.classList.contains('bi-pen')) {
        const id = e.target.dataset.id
        // 设置标题
        modalTitle.innerHTML = '修改学员'
        // 给弹框添加标识 - 学生的id
        modalBox.dataset.id = id
        // -------------
        // 1. 当前学生的信息 - 获取 
        const { data: student } = await axios.get(`/students/${id}`)
        console.log(student);
        // 2. 数据的回显
        // 比如: 获取页面中所有具有name属性的标签
        const nameList = form.querySelectorAll('[name]')
        // console.log(nameList);  // 伪数组 有下标, 有length...
        // forEach 是可以使用的, 因为是伪数组原型上的方法, 所以可以直接使用
        nameList.forEach(item => {
          // console.log(item);  // item 指的是表单每一项, input, select
          if (item.name === 'gender') {
            // 性别 -> checked属性进行选中
            if (+item.value === student.gender) item.checked = true
          } else {
            // item.value = '北京'
            // console.log(item.name);
            // console.log(student[item.name]);
            // if (item.name === 'age') {
            //   console.log(item);
            //   item.value = student[item.name]
            // }
            // if (item.name ==='group') {
            //   item.value = student[item.name]
            // }
            item.value = student[item.name]
          }
        })

        // 市和区的回显渲染 -------------------------
        // 获取的市的列表
        const { data: city } = await axios.get('/api/city', {
          params: {
            pname: pselect.value
          }
        })
        const chtml = city.map(item => {
          return `<option value="${item}">${item}</option>`
        }).join('')
        // 市下拉框 - 渲染市
        cselect.innerHTML = `<option value="">--城市--</option>${chtml}`
        // 设置下拉框显示的内容 -- .value
        cselect.value = student.city    

        // --------------------------------------------------------------------
        // 获取县的列表---------------------------
        const { data: area } = await axios.get('/api/area', {
          params: {
            pname: pselect.value,
            cname: cselect.value
          }
        })
        const ahtml = area.map(item => {
          return `<option value="${item}">${item}</option>`
        }).join('')
        // 区下拉框 - 渲染
        aselect.innerHTML = `<option value="">--地区--</option>${ahtml}`
        // 设置下拉框显示的内容 -- .value
        aselect.value = student.area

        // 弹框显示
        modal.show()
      }
    })
    // ----  弹框显示
    // 添加功能 / 编辑功能
    // 找对象
    const modalBox = document.querySelector('#modal')
    // 创建实例化对象
    const modal = new bootstrap.Modal(modalBox)
    // 调用show() 方法显示  hide() 隐藏
    // modal.show()

    // 3.添加功能
    // 3.1.1 重置表单
    // 3.1.2 动态设置标题  - 添加学员
    // 3.1.3 给弹框添加标识 - 添加功能 / add    编辑功能 / 当前学生的id
    // 3.1.4 弹框显示
    openModal.addEventListener('click', function () {
      // 重置表单
      form.reset()
      // 设置标题内容
      modalTitle.innerHTML = '添加学员'
      // 添加id - 为了识别、区分功能 - （添加和编辑共用同一个弹框）
      modalBox.dataset.id = 'add'

      // 重置城市+地区
      cselect.innerHTML = `<option value="">--城市--</option>`
      aselect.innerHTML = `<option value="">--地区--</option>`

      // 模态框显示
      modal.show()
    })

    // 4. 渲染省市区 --- 一进入页面就完成渲染
    async function initCity() {
      // 获取省份的数据
      const { data: province } = await axios.get('/api/province')
      // 生成省份的字符串
      const phtml = province.map(item => {
        return `<option value="${item}">${item}</option>`
      }).join('')
      // 省份下拉框 - 渲染省份
      pselect.innerHTML = `<option value="">--省份--</option>${phtml}`

      // 获取市的数据
      // 1. 给省份下拉框注册事件 - change
      // 2. 获取到当前的省份 - 辽宁省...
      // 3. 发送请求 - 为了获取省份对应的市
      pselect.addEventListener('change', async function () {
        // 省份
        const { data: city } = await axios.get('/api/city', {
          params: {
            pname: pselect.value
          }
        })
        // 获取的市的列表
        const chtml = city.map(item => {
          return `<option value="${item}">${item}</option>`
        }).join('')
        // 市下拉框 - 渲染市
        cselect.innerHTML = `<option value="">--城市--</option>${chtml}`
        // 区下拉框 - 重置
        aselect.innerHTML = `<option value="">--地区--</option>`
      })

      // 获取区的数据
      // 1. 给市下拉框注册change事件
      // 2. 获取当前省份 + 当前市
      // 3. 发送请求 - 获取区的列表 
      // 4. 渲染
      cselect.addEventListener('change', async function () {
        // 获取到省 + 市
        console.log('省', pselect.value);
        console.log('市', cselect.value);
        const { data: area } = await axios.get('/api/area', {
          params: {
            pname: pselect.value,
            cname: cselect.value
          }
        })
        console.log(area); // 区的列表
        const ahtml = area.map(item => {
          return `<option value="${item}">${item}</option>`
        }).join('')
        // 区下拉框 - 渲染
        aselect.innerHTML = `<option value="">--地区--</option>${ahtml}`
      })

    }
    initCity()


    // 5. 确认功能
    // 5.1 添加学员
    // 5.1.1 收集学生的信息
    // 5.1.2 判断添加/修改 - 自定义属性id
    // 5.1.3 发送请求 - 添加学员
    // 5.1.4 成功 
    //       提示用户 + 关掉模态框 + 重新渲染
    submitBtn.addEventListener('click', async function () {
      const data = serialize(form, { hash: true })
      // 修改数据类型 - 后端接口要求
      data.age = +data.age
      data.gender = +data.gender
      data.group = +data.group
      data.hope_salary = +data.hope_salary
      data.salary = +data.salary
      console.log(data);
      const id = modalBox.dataset.id
      // 判断 添加 or 修改
      if (id === 'add') {
        // 添加学员的功能
        try {
          await axios.post('/students', data)
          // 关掉模态框
          modal.hide()
          // 提示用户
          alert('添加学生成功~')
          // 重新渲染
          initStudentList()
        } catch (error) {
          alert('添加学生失败~')
        }
      } else {
        // 修改学员的功能
        try {
          await axios.put(`/students/${id}`, data)
          modal.hide()
          alert('修改学员成功~')
          initStudentList()
        } catch (error) {
          alert('修改学员失败~')
        }
      }
    })
  </script>
</body>

</html>